<template>
    <div class="channel-edit">
        <!-- 我的频道 -->
        <van-cell class="mycell">
            <template #title>
                <div class="title">我的频道</div>
            </template>
            <template #default>
                <van-button 
                    plain 
                    type="danger" 
                    round 
                    size="mini" 
                    class="edit-btn" 
                    @click="isEdit = !isEdit"
                >{{isEdit === true ? '完成' : '编辑'}}
                </van-button>
            </template>
        </van-cell>
        <!-- gutter设置格子间距 -->
        <van-grid :gutter="10" class="my-grid">
            <!-- 图标叉叉只有在isEdit值为true，且该频道不在固定频道中时才显示 -->
            <van-grid-item 
                :icon="( isEdit && !fixedChannel.includes(channel.id) ) ? 'clear' : ''" class="grid-item" 
                v-for="(channel, index) in myChannels" 
                :key="channel.id"
                @click="onMyChannelClick(channel, index)"
            >
                <template #text>
                    <span class="text" :class="{activeRed: index === activeId}">{{ channel.name }}</span>
                </template>
            </van-grid-item>
        </van-grid>

        <!-- 频道推荐 -->
        <van-cell>
            <template #title>
                <div class="title">频道推荐</div>
            </template>
        </van-cell>
        <!-- direction="horizontal"设置图标和文字横着排 -->
        <van-grid :gutter="10" direction="horizontal" class="recommend-grid">
            <van-grid-item 
                icon="plus" 
                :text="channel.name" 
                class="grid-item" 
                v-for="(channel, index) in recommendChannels" 
                :key="channel.id" 
                @click="onAddChannel(channel)"
            />
        </van-grid>
    </div>
</template>
<script>
import {getAllChannels, addChannel, deleteChannel} from '@/api/channel'
import { mapState } from 'vuex'
import {setItem} from '@/utils/storage'

export default {
    name: 'ChannelEdit',
    props: {
        myChannels: {
            type: Array,
            required: true
        },
        activeId: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            allChannels: [], //所有频道
            isEdit: false, //控制编辑状态
            fixedChannel: [0, 1, 2] //固定频道, 频道id为0、1、2的不能移除
        }
    },
    computed: {
        // 推荐频道 = 所有频道 - 我的频道
        recommendChannels() {
            // filter() 方法创建给定数组一部分的浅拷贝，其包含通过测试条件的所有元素。
            const channels = this.allChannels.filter((channel) => {
                // find() 方法返回数组中满足条件的第一个元素的值。否则返回 undefined。
                const res = this.myChannels.find((myChannel) => {
                    return myChannel.id === channel.id
                })
                // undefined 取反的结果即为true
                return !res
            })
            // 返回推荐频道结果
            return channels
        },
        ...mapState(['user'])
    },
    methods: {
        // 加载所有频道
        loadAllChannels() {
            getAllChannels().then((data) => {
                console.log(data)
                this.allChannels = data.data.data.channels
            }).catch((err) => {
                this.$toast('数据获取失败')
            })
        },
        // 添加频道
        onAddChannel(channel) {
            if(this.user) {
                // 已登录，数据存储到数据库
                addChannel({
                    id: channel.id, //频道id
                    seq: this.myChannels.length //序号(给数组最新长度就行)
                }).then((res) => {
                    this.myChannels.push(channel)
                    this.$toast('添加成功')
                }).catch((err) => {
                    this.$toast('添加失败, 请稍后重试')
                })

            }else {
                this.myChannels.push(channel)
                // 未登录，数据存储到本地
                setItem('TOUTIAO_CHANNELS', this.myChannels)
            }
        },
        // 在编辑或者非编辑状态时点击频道宫格时的操作
        onMyChannelClick(channel, index) {  
            if(this.isEdit) {
                // 编辑状态，执行删除频道
                if( this.fixedChannel.includes(channel.id) ) {
                    // 如果是固定频道，则不删除
                    return
                }
                this.onDeleteChannel(channel, index)
            }else {
                // 非编辑状态，执行切换频道
                this.$emit('updateActiveId', index, false)
            }
        },
        // 删除频道
        onDeleteChannel(channel, index) {
            if(this.user) {
                // 已登录，数据存储到数据库
                deleteChannel(channel.id)
                .then((res) => {
                    this.myChannels.splice(index, 1)
                    if(index <= this.activeId) {
                        // 如果要删除的索引号 <= 当前激活的索引号，则需手动将激活索引号减一
                        this.$emit('updateActiveId', this.activeId - 1, true)
                    }
                    this.$toast('删除成功')
                }).catch((err) => {
                    this.$toast('删除失败, 请稍后重试')
                })
            }else {
                this.myChannels.splice(index, 1)
                if(index <= this.activeId) {
                    // 如果要删除的索引号 <= 当前激活的索引号，则需手动将激活索引号减一
                    this.$emit('updateActiveId', this.activeId - 1, true)
                }
                // 未登录，数据存储到本地
                setItem('TOUTIAO_CHANNELS', this.myChannels)
            }
        }
    },
    created() {
        this.loadAllChannels()
    }
}
</script>

<style lang="less" scoped> 
.channel-edit {
     padding-top: 85px;
     .mycell {
        display: flex;
        align-items: center;
     }
     .title {
         font-size: 32px;
         color: #333;
     }

     .edit-btn {
         width: 104px;
         height: 48px;
         color: #f85959;
     }

     .grid-item {
         width: 160px;
         height: 86px;

         /deep/ .van-grid-item__content {
             background-color: #f3f4f5;
             white-space: nowrap; //控制文本不换行显示
             .van-grid-item__text, .text{
                 font-size: 28px;
                 color: #222;
                 margin-top: 0;
             }
             .activeRed {
                color: red;
             }
         }
     }

     .my-grid {
        margin-bottom: 70px;
        /deep/ .van-icon-clear {
             position: absolute;
             top: -10px;
             right: -10px;
             font-size: 30px;
             color: #cacaca;
             z-index: 2;
         }
     }
     .recommend-grid {
        /deep/ .van-icon-plus {
             font-size: 28px;
         }
     }
 }</style>